<template>
  <div class="container">
    <el-card>
      <el-row type="flex">
        <el-col type="flex" justify="end">
          <el-button
            type="success"
            class="btn"
            @click="$router.push('/questions/new')"
          >新增试题</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          size="medium"
          clear-validate
        >
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                v-model="form.subjectID"
                placeholder="请选择"
                :style="{ width: '100%' }"
                clearable
              >
                <el-option
                  v-for="(item, index) in subject"
                  :key="index"
                  :label="item.subjectName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                v-model="form.directory"
                placeholder="请选择"
                :style="{ width: '100%' }"
                clearable
              >
                <el-option
                  v-for="(item, index) in directoryList"
                  :key="index"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                v-model="form.tags"
                placeholder="请选择"
                :style="{ width: '100%' }"
                clearable
              >
                <el-option
                  v-for="(item, index) in tagsList"
                  :key="index"
                  :label="item.tagName"
                  :value="item.tagName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                v-model="form.keyword"
                placeholder="根据题干搜索"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="form.questionType" placeholder="请选择">
                <el-option
                  v-for="(item, index) in questionTypeOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="form.difficulty" placeholder="请选择">
                <el-option
                  v-for="(item, index) in difficultyOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <div class="d-flex flex-grow-1">
                <el-select v-model="form.direction" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in directionOptions"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <div class="d-flex flex-grow-1">
                <el-select v-model="form.creatorID" placeholder="请选择">
                  <el-option label="超级管理员" value=""></el-option>
                  <el-option label="录入管理员" value=""></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="form.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="form.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <div class="d-flex flex-grow-1">
                <el-select v-model="form.provinces" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in provincesOptions"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
                <el-select v-model="form.citys" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in citysOptions"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <div class="d-flex justify-content-end">
                <el-button @click="onClearForm">清除</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <!-- page -->
      <el-alert
        type="info"
        show-icon
        :closable="false"
      >共{{ page.total }}条数据</el-alert>
      <!-- 表格 -->
      <el-table :data="questionsList">
        <el-table-column label="试题编号" prop="number" />
        <el-table-column label="学科" prop="subject" />
        <el-table-column label="目录" prop="catalog" />
        <el-table-column label="题型" prop="questionType">
          <template v-slot="{ row }">
            {{ row.questionType | formatQuestionType }}
          </template>
        </el-table-column>
        <el-table-column label="题干" prop="question">
          <template v-slot="{ row }">
            {{ row.question | html2Text }}
          </template>
        </el-table-column>
        <el-table-column label="" width="200px"></el-table-column>
        <el-table-column label="录入时间" prop="addDate" width="200px">
          <template v-slot="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="难度" prop="difficulty">
          <template v-slot="{ row }">
            {{ row.difficulty | formatdifficultyType }}
          </template>
        </el-table-column>
        <el-table-column label="录入人" prop="creator" />
        <el-table-column label="操作" fixed="right" width="280px">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              plain
              size="small"
              circle
              @click="getBaseQuestionInfor(row.id)"
            ><i class="el-icon-view"></i></el-button>
            <el-button
              type="success"
              plain
              size="small"
              circle
              @click="$router.push('/questions/new/?id=' + row.id)"
            ><i class="el-icon-edit"></i></el-button>
            <el-button
              type="danger"
              plain
              size="small"
              circle
              @click="removBaseQuestion(row.id)"
            ><i class="el-icon-delete"></i></el-button>
            <el-button
              size="small"
              circle
              type="warning"
              plain
              @click="choiceAddSelected(row.id)"
            ><i class="el-icon-check"></i></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-row type="flex" justify="end" align="middle" style="height: 60px">
        <el-pagination
          background
          layout=" prev, pager, next, sizes,jumper"
          :page-size="page.pagesize"
          :page-sizes="[2, 10, 15, 20]"
          :current-page="page.page"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="changePage"
        />
      </el-row>
      <!-- 弹窗详情 -->
      <el-dialog
        width="900px"
        :visible="showDialog"
        v-bind="$attrs"
        title="题目预览"
        v-on="$listeners"
        @close="showDialog = false"
      >
        <div>
          <div class="question">
            <!-- <div>
              <span
                >【题型】：{{ preview.questionType | formatQuestionType }}</span
              ><span>【编号】：{{ preview.id }}</span
              ><span
                >【难度】：{{ preview.difficulty | formatdifficultyType }}</span
              ><span>【标签】：{{ preview.tags }}</span>
            </div> -->
            <el-descriptions :column="4">
              <el-descriptions-item label="【题型】">
                <template>
                  {{ preview.questionType | formatQuestionType }}
                </template>
              </el-descriptions-item>
              <el-descriptions-item label="【编号】">{{
                preview.id
              }}</el-descriptions-item>
              <el-descriptions-item label="【难度】">{{
                preview.difficulty | formatdifficultyType
              }}</el-descriptions-item>
              <el-descriptions-item label="【学科】">
                {{ preview.subjectName }}
              </el-descriptions-item>
              <el-descriptions-item label="【目录】">
                {{ preview.catalogID }}
              </el-descriptions-item>
              <el-descriptions-item label="【方向】">
                {{ preview.direction }}
              </el-descriptions-item>
            </el-descriptions>
            <!-- <div>
              <span>【学科】：{{ preview.subjectName }}</span
              ><span>【目录】：{{ preview.catalogID }}</span
              ><span>【方向】：{{ preview.direction }}</span>
            </div> -->
          </div>
          <div class="question">
            <span>【题干】:</span>
            <p>{{ preview.question | html2Text }}</p>
          </div>
          <div class="question">
            <div>
              <span>【参考答案】:</span>
              <template v-if="preview.questionType === '1'">
                <el-radio
                  v-for="(item, index) in preview.options"
                  :key="index"
                  style="display: block; margin: 20px 0"
                  :value="1"
                  :label="item.isRight"
                >{{ item.title }}</el-radio>
              </template>
              <template v-if="preview.questionType === '2'">
                <el-checkbox
                  v-for="(item, index) in preview.options"
                  :key="index"
                  style="display: block; margin: 20px 0"
                  :value="item.isRight === 1 ? true : false"
                  :label="item.isRight"
                >{{ item.title }}</el-checkbox>
              </template>
              <template v-if="preview.questionType === '3'">
                <div>{{ preview.options.title }}</div>
              </template>
              <!-- <span>{{ preview.options | html2Text }}</span> -->
            </div>
          </div>
          <div class="question">
            <div style="height: 30px">
              <span>参考答案</span>
              <el-button
                type="danger"
                @click="showVideo"
              >参考答案预览</el-button>
            </div>
            <div id="video" style="margin-top: 40px">
              <video width="320" height="240" controls>
                <source :src="preview.videoURL" type="video/mp4" />
                <source :src="preview.videoURL" type="video/ogg" />
                您的浏览器不支持 video 标签。
              </video>
            </div>
          </div>

          <div class="question">
            <span>【参考解析】:</span><span>{{ preview.answerID }}</span>
          </div>
          <div class="question">
            <span>【题目备注】:</span><span>{{ preview.remarks }}</span>
          </div>
        </div>
        <el-row slot="footer" type="flex" justify="end">
          <el-button
            type="primary"
            @click="showDialog = false"
          >确 定</el-button>
        </el-row>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { direction, questionType, difficulty } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { list as tagsList } from '@/api/hmmm/tags.js'
import { list as subjectSimpleList } from '@/api/hmmm/subjects.js'
import { list as baseQuestionsList, remove as removBaseQuestion, detail as baseQuestionDetail, choiceAdd } from '@/api/hmmm/questions.js'
import { simple as directorysSimpleList } from '@/api//hmmm/directorys.js'
export default {
  data() {
    return {
      provincesOptions: [],
      citysOptions: [],
      tagsList: [],
      directionOptions: [],
      questionTypeOptions: [],
      difficultyOptions: [],
      preview: {},
      subject: [],
      directoryList: [],
      questionsList: [],
      showDialog: false,
      type: [],
      form: {
        subjectID: undefined,
        directory: undefined, // 目录
        direction: undefined,
        questionType: undefined,
        difficulty: undefined,
        tags: undefined,
        creatorID: undefined,
        citys: undefined,
        provinces: undefined,
        remarks: undefined,
        keyword: undefined
      },
      page: {
        page: 1,
        pagesize: 10,
        total: 0
      }
    }
  },

  watch: {
    'form.subjectID': {
      immediate: true,
      handler() {
        if (this.form.subjectID) {
          this.directorysSimpleList(this.form.subjectID)
          this.getTagsList(this.form.subjectID)
        }
      }
    },
    // !监听省会
    'form.provinces': {
      immediate: true,
      handler() {
        this.citysOptions = citys(this.form.provinces)
      }
    }
  },
  created() {
    this.provincesOptions = provinces()
    this.directionOptions = direction
    this.questionTypeOptions = questionType
    this.difficultyOptions = difficulty
    this.getSimpleSubjects()
    this.baseQuestionsList()
  },
  methods: {
    // 表单提交
    submitForm() {
      this.baseQuestionsList()
    },
    // 清除表单选项
    onClearForm() {
      this.form = {}
    },
    // 加入精选题库
    async choiceAddSelected(id) {
      await this.$confirm('此操作将该题目加入精选, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await choiceAdd({ id: id, choiceState: 1 })
        this.$message.success('加入成功')
      }).catch(() => {})
    },
    changePage(newPage) {
      this.page.page = newPage
      this.baseQuestionsList()
    },
    handleSizeChange(val) {
      this.page.pagesize = val
      this.baseQuestionsList()
      console.log(val)
    },
    // 获取学科
    async getSimpleSubjects() {
      const { data } = await subjectSimpleList()
      this.subject = data.items
    // 获取二级目录
    },

    // 二级目录
    async directorysSimpleList(id) {
      console.log(id)
      const { data } = await directorysSimpleList({ subjectID: id })
      console.log(data)
      this.directoryList = data
    },
    // 获取标签列表
    async  getTagsList(id) {
      const { data } = await tagsList({ subjectID: id })
      this.tagsList = data.items
      console.log(data)
    },
    // 获取基础题库
    async baseQuestionsList() {
      const { data } = await baseQuestionsList({ ...this.form, ...this.page })
      this.questionsList = data.items
      this.page.total = data.counts
    },
    // 获取基础题详情
    async getBaseQuestionInfor(id) {
      const { data } = await baseQuestionDetail({ id: id })
      this.showDialog = true
      console.log(data)
      this.preview = data
      console.log('111')
    },
    // 删除基础题库
    async removBaseQuestion(id) {
      await this.$confirm('此操作将永久删除该题目, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await removBaseQuestion({ id: id })
        this.baseQuestionsList()
        this.$message.sucess('删除成功')
        console.log('111')
      }).catch(() => {})
    },
    // 显示隐藏video
    showVideo() {
      document.getElementById('video').style.display = 'block'
    }
    // // !定义题型过滤器
    // formatQuestionType (v) {
    //   const f = questionType.find(t => t.value === v)
    //   return f ? f.label : '未知'
    // }

  }
}

</script>

<style scoped>
/* ::v-deep #video[data-v-40019310] {
  position: relative;
  left: 0;
} */
#video {
  display: none;
  position: relative;
  left: 0;
}
.question {
  display: flex;
  flex: 1;
  border-bottom: 1px solid black;
  padding: 20px;
}
.el-form-item--medium .el-form-item__label {
  width: 120px;
}
.btn {
  float: right;
  font-size: 12px;
  margin: 10px 0;
}
/* .d-flex {
        display: flex;
    }
    .flex-grow-1 {
        flex-grow: 1;
    }
    .justify-content-end{
        justify-content: flex-end;
    } */
.d-flex > .el-select:not(:last-child) {
  margin-right: 10px;
}

.el-form {
  display: flex;
  flex-wrap: wrap;
}

.el-form-item__label {
  font-weight: bold;
}

.el-select {
  width: 100%;
}

.el-form--inline .el-form-item {
  display: flex;
  flex: 25%;
  margin-right: 0px;
}

.el-input__inner {
  padding: 0 30px;
}

.el-form-item__content {
  flex: 1;
}
</style>
